<template>
    <div class="Login">
        <header class="Login_header">
    <!-- 返回首页 -->
        <p @click='back_to_index' class="Login_to_index"><img src="../../../static/imgs/return.png"></p>
        <p class="flex2">个人中心</p>
        <p class="flex3">消息中心</p>
    </header>
    <main>
        <section class="deng">
        <!-- 信息修改 -->
        <router-link to='Lo_presonal'> 
           <dl class="Login_to_revise">
                <dt><img src="../../../static/imgs/Login_1.png"></dt>
                <dd>
                    <p style="display: none;" class="Login_to_enroll">登陆/注册</p>
                    <p class="Login_to_Lo_presonal">修改个人资料</p>
                </dd>
            </dl>
        </router-link>
        </section>

        <section class="Login_dall">
            <!-- 账户跳转 -->
            <router-link tag='span' to='Lo_account'>
                <article class="Login_to_account">
                    <p><img src="../../../static/imgs/Login_02_03.png"></p>
                    <span>我的账户</span>
                    <p><img src="../../../static/imgs/index_acac.png"></p>
                </article>
            </router-link>
            <!-- 我的预约 -->
            <router-link tag='span' to='Lo_myorder'>
                <article class="Login_to_myorder">
                    <p><img src="../../../static/imgs/Login_02_06.png"></p>
                    <span>我的预约</span>
                    <p><img src="../../../static/imgs/index_acac.png"></p>
                </article>
            </router-link>
            <!-- 优惠券跳转 -->
            <router-link tag='span' to='Lo_voucher'>
                <article class="Login_to_Lo_voucher">
                    <p><img src="../../../static/imgs/Login_02_08.png"></p>
                    <span>优惠券</span>
                    <p><img src="../../../static/imgs/index_acac.png"></p>
                </article>
            </router-link>
            <!-- 用户反馈 -->
            <router-link tag='span' to='Lo_userfeedback'>
                <article class="Login_to_userfeedback">
                    <p><img src="../../../static/imgs/Login_02_10.png"></p>
                    <span>用户反馈</span>
                    <p><img src="../../../static/imgs/index_acac.png"></p>
                </article>
            </router-link>
            <!-- 用户设置 -->
            <router-link tag='span' to='Login_set'>
                <article class="Login_to_set">
                    <p><img src="../../../static/imgs/Login_02_12.png"></p>
                    <span>设置</span>
                    <p><img src="../../../static/imgs/index_acac.png"></p>
                </article>
            </router-link>


        </section>

    </main>

    <footer>
        <p>联系客服: 4000-122-789</p>
        <p>投诉电话: 010-64757691</p>
        <p>投诉邮箱: guahaotousu@qq.com</p>
    </footer>

    </div>

</template>
<script>
 export default {
    name:'Login',
    methods:{
        back_to_index:function(){
            this.$router.go(-1)
        }
    }
}

</script>
<style scoped lang='less'> 

.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

.Flex{
    display:flex;
}

body{
    background:#eff3f2;
    height:100%;
}
header{
    
    .PxToRem(height,88);
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .Flex;
     align-items: center;
    .Login_to_index{
        flex:1;
       
        img{
            display:block;
            .PxToRem(width,55);
            .PxToRem(height,53);
        }
    }
    .flex2{
        flex:4;
        .PxToRem(font-size,37);
    }
    .flex3{
        flex:1;
        .PxToRem(font-size,25);
    }
}
.deng{
    .PxToRem(height,250);
    background:#1ac5a1;
    dl{
        width:25%;
        margin:0 auto;
        dt{
            text-align:center;
            padding-top:15%;
            img{
                .PxToRem(width,136);
                .PxToRem(height,130);
            }
        }
        dd{
            text-align:center;
            padding-top:10%;
            p{
                background:#18b290;
                width:100%;
                color:#ffffff;
                .PxToRem(height,44);
                .PxToRem(border-radius,20);
                .PxToRem(line-height,44);
            }
        }
    }
}

.Login_dall{
    background:#ffffff;
    .PxToRem(margin-top,20);
        article{
            .Flex;  
            padding:5% 2%;
            border-bottom: 1px solid #ccc;
            p{
                flex:1;
            }
            span{
                flex:6;
                .PxToRem(font-size,35);
            }           
        }

}

footer{
    text-align:center;
    padding-top:8%;
    padding-bottom:20%;
    .PxToRem(line-height,50);
    color:#616564;
}
main{
    padding:0;
}
</style>





